<template>
  <div>
    <!-- 输入框 -->
    <el-input
        style="width:50%;margin-bottom: 10px"
        placeholder="请根据订单编号输入搜索内容"
        v-model="pagination.queryString"
        @change="search"
        clearable>
    </el-input>
    <el-button @click="EmployeeBagList()" class="dalfBut">查询</el-button>

    <!-- 数据单向绑定  :data表格数据 -->
    <el-table :data="dataList" border>
      <!-- prop属性  与此处数据的属性一致 -->
      <el-table-column prop="id"   label="订单编号" width="80" ></el-table-column>
      <el-table-column prop="userId"   label="用户编号" width="80" ></el-table-column>
      <el-table-column prop="userName"   label="用户姓名" width="80" ></el-table-column>
      <el-table-column prop="userPhone" label="用户电话" width="200" ></el-table-column>
      <el-table-column prop="userAddress"    label="用户住址" width="150" ></el-table-column>
      <el-table-column prop="driverId" label="员工编号" width="80" ></el-table-column>
      <el-table-column prop="driverPhone" label="员工电话" width="200" ></el-table-column>
      <el-table-column prop="driverName" label="员工姓名" width="200" ></el-table-column>
      <el-table-column prop="goodName" label="货物名称" width="80" ></el-table-column>
      <el-table-column prop="type" label="货物类型" width="80" >
        <template slot-scope="scope">
          {{ scope.row.type==0?'食品':scope.row.type==1?'电子产品':scope.row.type==2?'服装':scope.row.type==3?'日用品':'家具' }}
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量" width="80" ></el-table-column>
      <el-table-column prop="price" label="价格" width="80" ></el-table-column>
      <el-table-column prop="state" label="状态" width="120">
        <template slot-scope="scope">
          {{ scope.row.state==0?'未发货':scope.row.state==1?'发货未入站':scope.row.state==2?'入站':scope.row.state==3?'出站派送中':scope.row.state==4?'用户未接收':"用户已接收"}}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small"   circle @click="handleUpdate(scope.row)" >派送完成</el-button>
          <el-button type="danger"  size="small" icon="el-icon-delete" circle @click="handleDelete(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页  :属性="" 单向数据绑定 -->
    <el-pagination
        class="pagiantion"
        @current-change="EmployeeBagList"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>

    <!-- 编辑标签弹层 -->
<!--    <div class="add-form">
      <el-dialog title="编辑检查项" :visible.sync="dialogFormVisibleEdit">
        <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户编号" prop="userId">
                <el-input v-model="formData.userId" readonly="readonly"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户姓名" prop="userName">
                <el-input v-model="formData.userName" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="用户电话" prop="userPhone">
                <el-input v-model="formData.userPhone" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户住址" prop="userAddress">
                <el-input v-model="formData.userAddress" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="员工编号" prop="driverId">
                <el-input v-model="formData.driverId" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工电话" prop="driverPhone">
                <el-input v-model="formData.driverPhone" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="员工姓名" prop="driverName">
                <el-input v-model="formData.driverName" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="货物名称" prop="goodName">
                <el-input v-model="formData.goodName" readonly="readonly" >
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="货物类型" prop="type">
                <el-input v-model="formData.type" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重量" prop="weight">
                <el-input v-model="formData.weight" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="价格" prop="price">
                <el-input v-model="formData.price" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="state">
                <el-input v-model="formData.state">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleEdit = false">取消</el-button>
          <el-button type="primary" @click="handleEdit()">确定</el-button>
        </div>
      </el-dialog>

    </div>-->


  </div>
</template>

<script>
export default {
  name: "EmployeeBagView",
  data() {
    return {
      pagination: {       //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 4,    //每页显示的记录数
        total: 100,        //总记录数
        queryString:this.$store.getters.getUser.name//查询条件
      },
      dataList: [],
      formData:{},
      /*dialogFormVisibleEdit: false,
      rules: {//校验规则
        userId: [{ required: true, message: '用户编号为必填项', trigger: 'blur' }],
        userName: [{ required: true, message: '用户姓名为必填项', trigger: 'blur' }],
        userPhone: [{ required: true, message: '用户电话为必填项', trigger: 'blur' }],
        userAddress: [{ required: true, message: '用户住址为必填项', trigger: 'blur' }],
        driverId: [{ required: true, message: '员工编号为必填项', trigger: 'blur' }],
        driverPhone: [{ required: true, message: '员工电话为必填项', trigger: 'blur' }],
        driverName: [{ required: true, message: '员工姓名为必填项', trigger: 'blur' }],
        goodName: [{ required: true, message: '货物名称为必填项', trigger: 'blur' }],
        type: [{ required: true, message: '货物类型为必填项', trigger: 'blur' }],
        weight: [{ required: true, message: '订单重量为必填项', trigger: 'blur' }],
        price: [{ required: true, message: '价格为必填项', trigger: 'blur' }],
        state: [{ required: true, message: '订单状态为必填项', trigger: 'blur' }]

      }*/
    }
  },
  created() {
    this.EmployeeBagList()
  },
  methods: {
    //若没有传递当前页码 ， 默认展示第一页
    EmployeeBagList(page = 1) {
      this.pagination.currentPage = page
      console.log(this.pagination.currentPage)
      let param= {
        currentPage: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        queryString: this.pagination.queryString
      }
      axios.get('http://localhost:8099/driver/package', {params: param})
          .then(response => {  //response.data.data 等价于 Map 有PageInfo&query
            console.log("访问后台")
            console.log(response)
            this.pagination.total = response.data.total
            this.dataList = response.data.records
          })
          .catch(error => {
            console.log(error)
          })
    },
    resetForm(){
      this.formData={}
    }
    ,
    handleCreate(){
      this.resetForm()
      this.dialogFormVisible=true
    },

    search(){
      this.EmployeeBagList()
    },
    handleUpdate(row){
      axios.get(`http://localhost:8099/driver/${row.id}`,this.datalist).then(response=> {
        console.log(response)
        this.pagination.total = response.data.total
        this.dataList = response.data.records
        if (response.data.code==200){
          this.formData=response.data.data
          this.EmployeeBagList()
        }else {
          this.$confirm('请勿重复操作？','提示',{type:'warning'})
          this.EmployeeBagList()
        }
      })
    },
    /*//编辑完成
    handleEdit(){
      //校验表单
      this.$refs["dataEditForm"].validate((valid)=>{
        if (valid){
          this.dialogFormVisibleEdit=false
          axios.post('http://localhost:8099/driver/updatebag',this.formData).then(response=>{
            if (response.data.code==200){
              this.$message.success(response.data.message)
            }else {
              this.$message.error(response.data.code)
            }
          })
        }else {
          this.$message.error('表单校验失败')
          return false
        }
      })
      location.reload()
    },*/
    handleDelete(row){
      this.$confirm('是否删除此订单？','提示',{type:'warning'}).then(()=>{
        if (row.state ==5){
          axios.delete(`http://localhost:8099/orders/delete/${row.id}`).then(response=>{
            if (response.data.code==200){
              this.$message.success(response.data.message);
              this.AdminList()
            }else {
              this.$message.error(response.data.code);
            }
          })
        }else {
          this.$confirm('用户还未接受订单，不能删除','警告',{type:'error'})
        }

      })
    }
  }
}
</script>

<style scoped>

</style>